<!--  -->
<template>
  <custom-form class="requiredFormItem" :rules="rules" ref="planningFormBase" :editModel="''" :is-validate="true" :form="form" :form-list="formOption" @change="handleChange">
    <template v-slot:responsibleName="scope">
      <BaseInput v-if="queryInfo.pageType == 'detail'" :value='form.responsibleName' disabled></BaseInput>
      <a-select v-else v-model="form.responsibleName" allow-clear showSearch optionFilterProp="label" placeholder="请选择" option-label-prop="label" @change="(id) => changeEmployeeName(id, record)">
        <a-icon v-if="fetching" style="color: #096dd9" slot="suffixIcon" type="loading" />
        <a-spin v-if="fetching" slot="notFoundContent" size="small" />
        <template v-else>
          <a-select-option v-for="item in memberList" :key="item.employeeId" :value="item.employeeId" :label="item.name">
            <a-tooltip placement="topLeft" :mouseLeaveDelay="0">
              <template slot="title">
                {{ item.jobNum }}
              </template>
              <div>{{ item.name }}({{ item.phone }})</div>
            </a-tooltip>
          </a-select-option>
        </template>
      </a-select>
    </template>
  </custom-form>
</template>

<script>
export default {
  name: 'Form',
  props: {
    baseFormInfo: {
      type: Object,
      default: () => {}
    },
    fetching: Boolean,
    form: Object,
    queryInfo: Object,
    memberList: Array
  },
  data() {
    return {
      formOption: [
        {
          label: '项目设计策划表类型',
          keyName: 'planType',
          type: 'a-select',
          data: [
            {
              value: 0,
              label: '适用于EPC/PPP项目'
            },
            {
              value: 1,
              label: '适用于施工总承包项目'
            }
          ]
        },
        {
          label: '设计阶段',
          keyName: 'designStage',
          type: 'a-select',
          data: []
        },
        {
          label: '设计管理责任人',
          keyName: 'responsibleName',
          slot: true
        },
        {
          label: '联系电话',
          keyName: 'contactPhone',
          type: 'BaseInput',
          disabled: true
        }
      ],
      rules: {
        designStage: [{ required: true, message: '请选择', trigger: 'change' }],
        responsibleName: [{ required: true, message: '请选择', trigger: 'change' }]
      }
    }
  },

  components: {},

  watch: {
    queryInfo: {
      handler(val) {
        if (val.pageType == 'detail') {
          this.formOption.map(v => {
            if (v.keyName == 'designStage' || v.keyName == 'responsibleName' || v.keyName == 'planType') {
              v.disabled = true
            }
          })
        }
      },
      immediate: true,
      deep: true
    },
    'form.planType': {
      handler(val, oldval) {
        const data1 = [
          {
            value: 0,
            label: '方案'
          },
          {
            value: 1,
            label: '初设'
          },
          {
            value: 2,
            label: '施工图'
          },
          {
            value: 3,
            label: '深化图'
          }
        ]
        const data2 = [
          {
            value: 2,
            label: '施工图'
          },
          {
            value: 3,
            label: '深化图'
          }
        ]
        this.formOption[1].data = val == 0 ? data1 : data2
        // 切换了项目设计策划表类型，设计阶段 置空
        if (oldval !== undefined) {
          this.form.designStage = undefined
        }
      },
      immediate: true
    },
    'form.id': {
      handler(val) {},
      immediate: true
    }
  },

  computed: {},

  created() {},

  mounted() {},

  methods: {
    handleChange() {},
    // 获取接收人姓名
    changeEmployeeName(id, item) {
      if (id) {
        const { name, phone } = this.memberList.filter((v) => v.employeeId === id)[0]
        this.form.responsibleId = id
        this.form.responsibleName = name
        this.form.contactPhone = phone
      }
    }
  }
}
</script>
<style lang='less' scoped>
</style>